import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';

const root: HTMLElement | null = document.getElementById('root');

interface PanelProps {
  headString:string;
  bodyString: string;
}
interface HeadProps {
  headString:string;
}
interface BodyProps {
  bodyString: string;
}
class Head extends React.Component<HeadProps>{
  render():React.ReactElement{
    return <div style={{border:'1px solid green',padding:5}}>{this.props.headString}</div>
  }
}
class Body extends React.Component<BodyProps>{
  render():React.ReactElement{
    return <div style={{border:'1px solid green',padding:5}}>{this.props.bodyString}</div>
  }
}
class Panel extends React.Component<PanelProps>{
  render():React.ReactElement{
    const {headString, bodyString} = this.props;
    return (
      <div style={{border:'1px solid red', padding: 5}}>
        <Head headString={headString}/>
        <Body bodyString={bodyString}/>
      </div>
    )
  }
}

let panelProps: PanelProps = {headString: 'head', bodyString: 'body'};

ReactDOM.render(<Panel {...panelProps} />, root);
